<template>
  <div class="reactive-layout-config-data-form">
    <Form :label-width="105">
      <FormItem label="背景色">
        <ColorPicker size="small" v-model="backgroundColor" />
      </FormItem>
      <FormItem label="画布宽度">
        <InputNumber class="m-r-5px" size="small" :max="10000" :min="0" :step="1" v-model="width"></InputNumber>
        <Select size="small" v-model="widthPixelUnit" :style="{width: '60px'}">
          <Option v-for="item in $PnDict.pixelUnits" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>
      <FormItem label="画布高度">
        <InputNumber class="m-r-5px" size="small" :max="10000" :min="0" :step="1" v-model="height"></InputNumber>
        <Select size="small" v-model="heightPixelUnit" :style="{width: '60px'}">
          <Option v-for="item in $PnDict.pixelUnits" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>
      <FormItem label="布局块间距">
        <Poptip transfer trigger="hover" title="布局块间距：提示" placement="left-start" content="修改此配置，需要保存页面并刷新设计器才可看到效果">
          <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="gridItemMargin"></InputNumber> px
        </Poptip>
      </FormItem>
      <FormItem label="响应式">
        <Poptip transfer trigger="hover" title="响应式：友情提醒" placement="left-start" content="打开响应式，可以获得更好的设备兼容性，但在设计器中将会部分影响撤回功能的使用体验">
          <i-switch v-model="responsive">
            <span slot="open"></span>
            <span slot="close"></span>
          </i-switch>
        </Poptip>
      </FormItem>
      <FormItem label="布局块拖拽">
        <i-switch v-model="draggable">
          <span slot="open"></span>
          <span slot="close"></span>
        </i-switch>
      </FormItem>
      <FormItem label="布局块调整尺寸">
        <i-switch v-model="resizable">
          <span slot="open"></span>
          <span slot="close"></span>
        </i-switch>
      </FormItem>

      <FormItemPanel title="背景图片">
        <FormItem label="操作">
          <Upload :action="uploadAction"
                  name="files" :on-success="imageUploadSuccessHandle" :show-upload-list="true">
            <Button size="small" icon="ios-cloud-upload-outline">上传图片</Button>
          </Upload>
        </FormItem>
        <FormItem label="相对路径">
          <i-input size="small" v-model="imageRelativePath" >
            <Button slot="append" icon="md-close" @click="imageRelativePath = ''"></Button>
          </i-input>
        </FormItem>
        <FormItem label="背景重复">
          <Select :transfer="true" size="small" v-model="imageRepeat">
            <Option v-for="item in $PnDict.backgroundRepeats" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="背景图尺寸">
          <Input size="small" v-model="imageSize" placeholder="参考CSS的background-size"/>
        </FormItem>
      </FormItemPanel>

      <FormItem label="操作">
        <Button size="small" type="primary" @click="customStyleCodeModalVisible = !customStyleCodeModalVisible">自定义样式</Button>
      </FormItem>

    </Form>

    <Modal
        v-model="customStyleCodeModalVisible"
        draggable
        scrollable
        title="自定义样式编辑"
        width="650"
        :mask="true"
        :z-index="999">
      <!--<Alert type="info">提示：自定义样式会与预设样式进行浅合并，如果存在相同属性配置，自定义样式会覆盖预设样式</Alert>-->
      <CodeEditor v-model="customStyleCode" mode="SCSS"></CodeEditor>
      <div slot="footer">
        <Button type="default" @click="customStyleCodeModalVisible = false">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getField',
    mutationType: 'designer/updateField',
  });

  export default {
    name: 'ReactiveLayoutConfigDataForm',
    data() {
      return {
        customStyleCodeModalVisible: false,
        uploadAction: process.env.VUE_APP_BASEPATH + '/file/upload'
      }
    },
    mounted() {

    },
    methods: {
      imageUploadSuccessHandle (res) {
        if(res.code == 1) {
          this.imageRelativePath = res.data.relativePath
        }
      }
    },
    computed: {
      ...mapFields({
        width: 'pageMetadata.layout.layoutConfigData.width',
        widthPixelUnit: 'pageMetadata.layout.layoutConfigData.widthPixelUnit',
        height: 'pageMetadata.layout.layoutConfigData.height',
        heightPixelUnit: 'pageMetadata.layout.layoutConfigData.heightPixelUnit',
        backgroundColor: 'pageMetadata.layout.layoutConfigData.backgroundColor',
        gridItemMargin: 'pageMetadata.layout.layoutConfigData.gridItemMargin',
        responsive: 'pageMetadata.layout.layoutConfigData.responsive',
        draggable: 'pageMetadata.layout.layoutConfigData.draggable',
        resizable: 'pageMetadata.layout.layoutConfigData.resizable',

        imageRelativePath: 'pageMetadata.layout.layoutConfigData.imageRelativePath',
        imageRepeat: 'pageMetadata.layout.layoutConfigData.imageRepeat',
        imageSize: 'pageMetadata.layout.layoutConfigData.imageSize',

        customStyleCode: 'pageMetadata.layout.layoutConfigData.customStyleCode',
      }),

    }
  }
</script>

<style scoped>
  .ivu-form-item {
    margin-bottom: 0px;
  }

  .reactive-layout-config-data-form {

  }
</style>
